<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Using the Style Object</title>
<meta name="generator" content="Oracle DARB XHTML Converter (Mode = document) - Version 5.1.2 Build 015" />
<meta name="date" content="2011-11-03T11:27:22Z" />
<meta name="robots" content="noarchive" />
<meta name="doctitle" content="Using the Style Object" />
<meta name="relnum" content="Release 1.5" />
<meta name="partnum" content="E23376-02" />
<link rel="copyright" href="./dcommon/html/cpyr.htm" title="Copyright" type="text/html" />
<link rel="stylesheet" href="./dcommon/css/blafdoc.css" title="Oracle BLAFDoc" type="text/css" />
<link rel="contents" href="toc.htm" title="Contents" type="text/html" />
<link rel="index" href="index.htm" title="Index" type="text/html" />
<link rel="prev" href="layout.htm" title="Previous" type="text/html" />
<link rel="next" href="theme.htm" title="Next" type="text/html" />
</head>
<body>
<div class="header"><a id="top" name="top"></a>
<div class="zz-skip-header"><a href="#BEGIN">Skip Headers</a></div>
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" valign="top"><b>Lightweight UI Toolkit Developer's Guide</b><br />
<b>Release 1.5</b><br />
E23376-02</td>
<td valign="bottom" align="right">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225">
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><a href="toc.htm"><img src="./dcommon/gifs/toc.gif" alt="Go To Table Of Contents" /><br />
<span class="icon">Contents</span></a></td>
<td align="center" valign="top"><a href="index.htm"><img src="./dcommon/gifs/index.gif" alt="Go To Index" /><br />
<span class="icon">Index</span></a></td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100">
<tr>
<td align="center"><a href="layout.htm"><img src="./dcommon/gifs/leftnav.gif" alt="Previous" /><br />
<span class="icon">Previous</span></a>&nbsp;</td>
<td align="center"><a href="theme.htm"><img src="./dcommon/gifs/rightnav.gif" alt="Next" /><br />
<span class="icon">Next</span></a></td>
<td>&nbsp;</td>
</tr>
</table>
<a name="BEGIN" id="BEGIN"></a></div>
<!-- class="header" -->
<div class="ind"><!-- End Header --><a id="BADGGABB" name="BADGGABB"></a>
<h1 class="chapter"><span class="secnum">7</span> Using the Style Object</h1>
<p>The <a id="sthref117" name="sthref117"></a>Style object sets colors, fonts, transparency, margin, padding, images, and borders to define the style for a given component. Each Component contains a selected Style Object and allows Style modification at runtime using <a id="sthref118" name="sthref118"></a><code>component.getSelectedStyle()</code> and <a id="sthref119" name="sthref119"></a><code>component.getUnselectedStyle()</code>. The style is also used in Theming (<a href="theme.htm#BADBCIEI">Chapter 8</a>). When a Theme is changed, the Style objects are updated automatically.</p>
<a id="Z40008861289540" name="Z40008861289540"></a>
<div class="sect1">
<h2 class="sect1">Color</h2>
<p>Each Component has two adjustable <a id="sthref120" name="sthref120"></a>colors:</p>
<div class="inftblhruleinformal">
<table class="HRuleInformal" summary="Add Summary attribute value here." dir="ltr" border="1" width="100%" frame="hsides" rules="rows" cellpadding="3" cellspacing="0">
<col width="30%" />
<col width="*" />
<tbody>
<tr align="left" valign="top">
<td align="left" id="r1c1-t2">Foreground color</td>
<td align="left">The component <a id="sthref121" name="sthref121"></a>foreground color that usually refers to the component text color. For example, for a Button it's the text color.</td>
</tr>
<tr align="left" valign="top">
<td align="left" id="r2c1-t2">Background color</td>
<td align="left" headers="r2c1-t2">The component <a id="sthref122" name="sthref122"></a>background color.</td>
</tr>
</tbody>
</table>
<br /></div>
<!-- class="inftblhruleinformal" -->
<p>The color specification is RGB. There is no alpha channel within the color (the background transparency is separate).</p>
<p>Valid values are integers ranging from 0x000000 to 0xffffff (black to white respectively) or a decimal number.</p>
</div>
<!-- class="sect1" -->
<a id="Z40008861289550" name="Z40008861289550"></a>
<div class="sect1">
<h2 class="sect1">Font</h2>
<p>Fonts are set with the Font object (see the Font API in the API documentation located in <span class="italic">install-dir</span><code>/docs/api/lwuit</code>. Lightweight UI Toolkit supports both for Bitmap <a id="sthref123" name="sthref123"></a>fonts and for system fonts, similar to common MIDP fonts. Fonts are discussed in <a href="resources.htm#CJBCGCDD">Chapter 9</a>.</p>
</div>
<!-- class="sect1" -->
<a id="Z40008861289558" name="Z40008861289558"></a>
<div class="sect1">
<h2 class="sect1">Transparency</h2>
<p>Lightweight UI Toolkit style supports background component transparency, to add flexibility and appeal to the UI. To set a component <a id="sthref124" name="sthref124"></a>transparency level, call <a id="sthref125" name="sthref125"></a>setBgTransparency and specify an integer or a byte. The integer value must range between 0 to 255, where 255 (the default) is opaque.</p>
</div>
<!-- class="sect1" -->
<a id="BADIFJEI" name="BADIFJEI"></a>
<div class="sect1">
<h2 class="sect1">Margin and Padding</h2>
<p>Margin and Padding are inspired by the CSS Box Model. Each component has a main content area (for example, text or icon) and optional surrounding <a id="sthref126" name="sthref126"></a>padding and <a id="sthref127" name="sthref127"></a>margin areas. The size of each area is specified by four integers that represent the top, bottom, left and right space (similar to component Insets terminology in SWING). The following diagram shows the placement of the areas in relation to the component content area:</p>
<div class="figure"><a id="Z4000f581290128" name="Z4000f581290128"></a>
<p class="titleinfigure">Figure 7-1 Padding and Margin Relationships</p>
<img src="img/margin.jpg" alt="Description of Figure 7-1 follows" title="Description of Figure 7-1 follows" longdesc="img_text/margin.htm" /><br />
<a id="sthref128" name="sthref128" href="img_text/margin.htm">Description of "Figure 7-1 Padding and Margin Relationships"</a><br />
<br /></div>
<!-- class="figure" -->
<p>Padding and margins can be set as follows:</p>
<pre xml:space="preserve" class="oac_no_warn">
// Setting padding with positive values
setPadding(int top, int bottom, int left, int right)
 
// orientation can be Component.TOP, BOTTOM, LEFT or RIGHT
setPadding(int orientation, int gap)
 
// Setting margin with positive values
setMargin(int top, int bottom, int left, int right)
 
// orientation can be Component.TOP, BOTTOM, LEFT or RIGHT
setMargin(int orientation, int gap)
</pre></div>
<!-- class="sect1" -->
<a id="Z40008861289572" name="Z40008861289572"></a>
<div class="sect1">
<h2 class="sect1">Images</h2>
<p>In Style, Images refer to a component <a id="sthref129" name="sthref129"></a>background image. By default components do not have a background image, so the <a id="sthref130" name="sthref130"></a>bgImage parameter is null by default. For more details about images, please refer to <a href="resources.htm#CJBCGCDD">Chapter 9</a>.</p>
</div>
<!-- class="sect1" -->
<a id="Z40008861289580" name="Z40008861289580"></a>
<div class="sect1">
<h2 class="sect1">Borders</h2>
<p>The Style object supports defining custom rendering of a border<a id="sthref131" name="sthref131"></a>. There are several default built-in border types (see the Javadoc&trade; of the Border class). Borders can either replace the background painter (as is the case with round borders and sometimes with image borders) or they can be rendered after the component itself is rendered. A custom border can be built by deriving the Border class and overriding the appropriate methods.</p>
<p>A border is rendered into the padding area of the component so it is important that the component padding is large enough to contain the border drawing.</p>
<div class="sect2"><a id="sthref132" name="sthref132"></a>
<h3 class="sect2">Bevel</h3>
<p>The bevel border<a id="sthref133" name="sthref133"></a> type presents a simple 3D style border that can appear lowered or raised, providing simple depth perception for actions such as button presses.<a id="sthref134" name="sthref134"></a></p>
<div class="figure"><a id="sthref135" name="sthref135"></a>
<p class="titleinfigure">Figure 7-2 Bevel Lowered Border</p>
<img src="img/border_bevel_lower.png" alt="Description of Figure 7-2 follows" title="Description of Figure 7-2 follows" longdesc="img_text/border_bevel_lower.htm" /><br />
<a id="sthref136" name="sthref136" href="img_text/border_bevel_lower.htm">Description of "Figure 7-2 Bevel Lowered Border"</a><br />
<br /></div>
<!-- class="figure" -->
<div class="figure"><a id="sthref137" name="sthref137"></a>
<p class="titleinfigure">Figure 7-3 Bevel Raised Border</p>
<img src="img/border_bevel_raised.png" alt="Description of Figure 7-3 follows" title="Description of Figure 7-3 follows" longdesc="img_text/border_bevel_raised.htm" /><br />
<a id="sthref138" name="sthref138" href="img_text/border_bevel_raised.htm">Description of "Figure 7-3 Bevel Raised Border"</a><br />
<br /></div>
<!-- class="figure" --></div>
<!-- class="sect2" -->
<div class="sect2"><a id="sthref139" name="sthref139"></a>
<h3 class="sect2">Etched</h3>
<p>The etched border type provides a look similar to an engraved line. Like the bevel border, it too can appear raised<a id="sthref140" name="sthref140"></a> or lowered<a id="sthref141" name="sthref141"></a>.</p>
<div class="figure"><a id="sthref142" name="sthref142"></a>
<p class="titleinfigure">Figure 7-4 Etched Lowered Border</p>
<img src="img/border_etched_lower.png" alt="Description of Figure 7-4 follows" title="Description of Figure 7-4 follows" longdesc="img_text/border_etched_lower.htm" /><br />
<a id="sthref143" name="sthref143" href="img_text/border_etched_lower.htm">Description of "Figure 7-4 Etched Lowered Border"</a><br />
<br /></div>
<!-- class="figure" -->
<div class="figure"><a id="sthref144" name="sthref144"></a>
<p class="titleinfigure">Figure 7-5 Etched Raised Border</p>
<img src="img/border_etched_raised.png" alt="Description of Figure 7-5 follows" title="Description of Figure 7-5 follows" longdesc="img_text/border_etched_raised.htm" /><br />
<a id="sthref145" name="sthref145" href="img_text/border_etched_raised.htm">Description of "Figure 7-5 Etched Raised Border"</a><br />
<br /></div>
<!-- class="figure" --></div>
<!-- class="sect2" -->
<div class="sect2"><a id="sthref146" name="sthref146"></a>
<h3 class="sect2">Line</h3>
<p>The line border<a id="sthref147" name="sthref147"></a> just draws a rectangle around the component with the option of defining the thickness and color of the rectangle.</p>
</div>
<!-- class="sect2" -->
<div class="sect2"><a id="sthref148" name="sthref148"></a>
<h3 class="sect2">Round</h3>
<p>The round border<a id="sthref149" name="sthref149"></a> draws a rounded rectangle and optionally fills the background appropriately.</p>
<p><span class="bold">PERFORMANCE WARNING:</span></p>
<p>The round border might be very expensive! A round border is cheap for a completely opaque solid color. However, when using features such as gradients, images or alpha channel the round border effect is calculated on the fly! This is computationally expensive. We recommend trying to achieve these same effects with image borders which are cheaper.</p>
<p>The round border supports defining its color (or using the theme color) and defining the size of the arcs rounding the border.</p>
<div class="figure"><a id="sthref150" name="sthref150"></a>
<p class="titleinfigure">Figure 7-6 Round Border</p>
<img src="img/border_rounded.png" alt="Description of Figure 7-6 follows" title="Description of Figure 7-6 follows" longdesc="img_text/border_rounded.htm" /><br />
<a id="sthref151" name="sthref151" href="img_text/border_rounded.htm">Description of "Figure 7-6 Round Border"</a><br />
<br /></div>
<!-- class="figure" --></div>
<!-- class="sect2" -->
<div class="sect2"><a id="sthref152" name="sthref152"></a>
<h3 class="sect2">Image</h3>
<p>The image borde<a id="sthref153" name="sthref153"></a>r option will only appear when images exist in the resource file, you can read more on creating image borders in the image border wizard. Image borders come in 4 flavors:</p>
<div class="sect3"><a id="sthref154" name="sthref154"></a>
<h4 class="sect3">9 Part</h4>
<p>Uses 9<a id="sthref155" name="sthref155"></a> or 8 images to represent the border for the component. The structure is as shown in <a href="#BABHGJDC">Figure 7-7</a>:</p>
<div class="figure"><a id="BABHGJDC" name="BABHGJDC"></a>
<p class="titleinfigure">Figure 7-7 9-Part Image Border</p>
<img src="img/patchdemo9.png" alt="Description of Figure 7-7 follows" title="Description of Figure 7-7 follows" longdesc="img_text/patchdemo9.htm" /><br />
<a id="sthref156" name="sthref156" href="img_text/patchdemo9.htm">Description of "Figure 7-7 9-Part Image Border"</a><br />
<br /></div>
<!-- class="figure" -->
<p>Notice that the center image is optional. The top, bottom, left and right images are tiled while the corners (Top Left, Top Right, Bottom Left, and Bottom Right) are kept in place. The center image (if defined) is also tiled. This allows LWUIT to resize the component without any scaling, degradation, performance cost, or memory overhead.</p>
<p>Remember that drawing an image is an expensive operation, so images in the image border shouldn't be too small. For example, a common designer mistake is to produce a single pixel image for tiling. LWUIT seamlessly crops tiled images, so you should make an effort to make images a reasonable size (when in doubt use something in the area of 80-100 pixels).</p>
</div>
<!-- class="sect3" -->
<div class="sect3"><a id="sthref157" name="sthref157"></a>
<h4 class="sect3">3 Part</h4>
<p>The 3 Part<a id="sthref158" name="sthref158"></a> is somewhat unique to LWUIT and relies on MIDP's fast rotation drawing. It assumes perfectly rectangular images and draws the top left image rotated to produce all corners and does the same for the top image (center is again optional and used as usual). Thus the 3 part border can produce some attractive results in a smaller size.</p>
</div>
<!-- class="sect3" -->
<div class="sect3"><a id="sthref159" name="sthref159"></a>
<h4 class="sect3">Horizontal/Vertical</h4>
<p>The image<a id="sthref160" name="sthref160"></a> border is highly biased to symmetric shapes that can be enlarged to all directions. However, some shapes (such as the iPhone's angular back button) cannot be cut into a 9-patch image without causing artifacts.</p>
<p>The Horizontal and Vertical Image borders accept 3 images each and only grow on one axis. We don't recommend using them freely, even when text (which can vary wildly in size) isn't used, one often needs to align to text which requires resizing.</p>
</div>
<!-- class="sect3" --></div>
<!-- class="sect2" --></div>
<!-- class="sect1" -->
<a id="Z40008861289584" name="Z40008861289584"></a>
<div class="sect1">
<h2 class="sect1">Style Listener</h2>
<p>The <a id="sthref161" name="sthref161"></a>Style listener gives you the ability to track changes in a certain component style object. For example you might want to monitor changes in the background color of a component, and react accordingly.</p>
<p>The following code shows how to add a listener and track any style property change to the Font.</p>
<pre xml:space="preserve" class="oac_no_warn">
myComponent.getStyle().addStyleListener(new StyleListener() {
   public void styleChanged(String propertyName, Style source) {
      if (propertyName.equals(Style.FONT)) {
         System.out.println("Font of myComponent got changed.");
      }
   }
});
</pre></div>
<!-- class="sect1" -->
<a id="Z40008861289590" name="Z40008861289590"></a>
<div class="sect1">
<h2 class="sect1">Painters</h2>
<p>Painters in Style refers to the component's background drawing. The Painter draws itself and then the component draws itself on top. For more information please refer to <a href="painters.htm#CGFDAHFE">Chapter 10</a>.</p>
<p>To set a painter, use the <code>setBgPainter</code> method. For example to set myPainter as the component background painter, write:<a id="sthref162" name="sthref162"></a></p>
<p><code>mycomponent.getStyle().setBgPainter(myPainter);</code></p>
</div>
<!-- class="sect1" --></div>
<!-- class="ind" -->
<!-- Start Footer -->
<div class="footer">
<hr />
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%">
<col width="33%" />
<col width="*" />
<col width="33%" />
<tr>
<td valign="bottom">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100">
<col width="*" />
<col width="48%" />
<col width="48%" />
<tr>
<td>&nbsp;</td>
<td align="center"><a href="layout.htm"><img src="./dcommon/gifs/leftnav.gif" alt="Previous" /><br />
<span class="icon">Previous</span></a>&nbsp;</td>
<td align="center"><a href="theme.htm"><img src="./dcommon/gifs/rightnav.gif" alt="Next" /><br />
<span class="icon">Next</span></a></td>
</tr>
</table>
</td>
<td class="copyrightlogo"><img class="copyrightlogo" src="./dcommon/gifs/oracle.gif" alt="Oracle Logo" /><br />
<span class="copyrightlogo">Copyright&nbsp;&copy;&nbsp;2008, 2011,&nbsp;Oracle&nbsp;and/or&nbsp;its&nbsp;affiliates.&nbsp;All&nbsp;rights&nbsp;reserved.</span> <a href="./dcommon/html/cpyr.htm"><br />
<span class="copyrightlogo">Legal Notices</span></a></td>
<td valign="bottom" align="right">
<table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225">
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><a href="toc.htm"><img src="./dcommon/gifs/toc.gif" alt="Go To Table Of Contents" /><br />
<span class="icon">Contents</span></a></td>
<td align="center" valign="top"><a href="index.htm"><img src="./dcommon/gifs/index.gif" alt="Go To Index" /><br />
<span class="icon">Index</span></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- class="footer" -->
</body>
</html>
